<template>
  <div class="login">
    <div class="login-main" v-show="loginShow">
      <div class="login-title">
        <h3>招聘后台管理系统</h3>
      </div>
      <div class="login-login login-account">
        <input type="text" placeholder="用户名" v-on:keyup.13.stop="loginClick" v-model="usernameVal">
      </div>
      <div class="login-pwd">
        <input type="password" placeholder="密码" v-on:keyup.13.stop="loginClick" v-model="passwordVal">
      </div>
      <div class="login-but">
        <div class="login-but-but" @click="loginClick">
          <span>登</span><span>录</span>
        </div>
      </div>
    </div>
    <div class="login-content" v-show="!loginShow">
      <div>
        <div>
          <span>运</span>
          <span>璟</span>
          <span>网</span>
          <span>络</span>
          <span>科</span>
          <span>技</span>
          <span>有</span>
          <span>限</span>
          <span>公</span>
          <span>司</span>
        </div>
      </div>
      <div>
        <p>招聘后台管理系统</p>
      </div>
      <div>
        <div @click="loginShowClick">
          <span>登</span>
          <span>录</span>
        </div>
      </div>
    </div>
    <div class="login-footer">
      <!-- <img src="/static/img/招聘登陆页背景@3x.png" alt=""> -->
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      loginShow: false,
      usernameVal: "",
      passwordVal: ""
    };
  },
  filters: {},
  created: function() {},
  watch: {},
  mounted() {},
  methods: {
    loginShowClick() {
      this.loginShow = true;
    },
    loginClick() {
      var self = this;
      self
        .getlogin({
          username: self.usernameVal,
          password: self.passwordVal
        })
        .then(data => {
          if (data.code == 200) {
            self.$router.push({
              path: "/home"
            });
            console.log(data.data.username);
            sessionStorage.setItem("usernameStr", data.data.username);
          } else {
            self.$message({
              type: "info",
              message: data.message
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常!"
          });
        });
    },
    ...mapActions(["getlogin"])
  }
};
</script>
<style scoped>
.login-content > div:nth-child(1) {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-content > div:nth-child(1) > div {
  width: 314px;
  height: 20px;
  font-size: 14px;
  text-align: center;
  color: rgba(68, 75, 85, 1);
  line-height: 20px;
  text-align: center;
  text-justify: distribute;
  display: flex;
  align-items: center;
}
.login-content > div:nth-child(1) > div span {
  height: 20px;
  font-size: 14px;
  text-align: center;
  color: rgba(68, 75, 85, 1);
  line-height: 20px;
  margin-right: 17px;
}
.login-content > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 90px;
  width: 100%;
  height: 90px;
}
.login-content > div:nth-child(2) p {
  font-size: 80px;
  color: rgba(68, 75, 85, 1);
  line-height: 90px;
  width: 100%;
  height: 90px;
  text-align: center;
  font-weight: bold;
  font-family: PingFangSC-Semibold;
}
.login-content > div:nth-child(3) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 37px;
  margin-top: 60px;
}
.login-content > div:nth-child(3) > div {
  width: 136px;
  height: 37px;
  background: rgba(250, 140, 22, 1);
  border-radius: 19px;
  display: flex;
  color: rgba(255, 255, 255, 1);
  justify-content: center;
  align-items: center;
  font-size: 21px;
  cursor: pointer;
}
.login-content > div:nth-child(3) > div span {
  font-size: 21px;
  color: rgba(255, 255, 255, 1);
}
.login-content > div:nth-child(3) > div span:nth-child(2) {
  font-size: 21px;
  margin-left: 10px;
  color: rgba(255, 255, 255, 1);
}
.login-content {
  height: 180px;
  min-width: 512px;
  background-color: #fff;
  margin-top: 274px;
  display: flex;
  flex-wrap: wrap;
}
.login-title {
  height: 60px;
  width: 100%;
  margin-top: 141px;
}
h3 {
  text-align: center;
  margin: 0;
  padding: 0;
  height: 60px;
  width: 100%;
  font-size: 48px;
  color: rgba(51, 51, 51, 1);
}
.login-account {
  margin-top: 50px;
}
.login-pwd {
  margin-top: 28px;
  height: 45px !important;
  line-height: 45px;
  display: flex;
  justify-content: center;
}
.login-pwd input {
  width: 368px;
  height: 34px !important;
  line-height: 34px;
  padding-left: 5px;
  font-size: 14px;
  border-bottom: 2px solid rgba(0, 0, 0, 1);
}
.login-login {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 34px;
  line-height: 34px;
}
.login-login input {
  width: 368px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 2px solid rgba(0, 0, 0, 1);
}
.login-but {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 54px;
}
.login-but-but {
  width: 368px;
  height: 39px;
  background: rgba(127, 127, 127, 1);
  border-radius: 20px;
  text-align: center;
  font-size: 21px;
  color: #fff;
  cursor: pointer;
  line-height: 39px;
}
.login-but-but span:nth-child(1) {
  margin-right: 5px;
}
.login-but-but span:nth-child(2) {
  margin-left: 5px;
}
.login-main {
  width: 490px;
  height: 420px;
  margin-top: 50px;
  background-color: #fff;
}
.login-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: url("/static/img/招聘登陆页背景@3x.png") no-repeat;
  background-size: 100% 100%;
}
.login {
  min-height: 100vh;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  position: relative;
}
</style>